সিএসএস ড্রপডাউন (CSS Dropdown)

Web Development - সিএসএস (CSS) সিএসএস ব্যাসিক(CSS Basic) |
313
313

ড্রপডাউনের উদাহরণ

মাউস আনুন !

ড্রপডাউন

ইমেজ ড্রপডাউনঃbuilding


বেসিক ড্রপডাউন

একটি বেসিক ড্রপডাউন তৈরি করিঃ

kt_satt_skill_example_id=1176

উদাহরণের বর্ণনা

এইচটিএমএলঃ
হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ <span> অথবা <button> এলিমেন্ট।

ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি <div> এলিমেন্ট ব্যবহার করি।

সিএসএসঃ
.dropdown ক্লাসে position:relative ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute ব্যবহার করে কন্টেন্টগুলোকে বাটনের নিচে দেখাতে চাই।

.dropdown-content ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্টগুলো রয়েছে এবং ইহা ডিফল্ট আকারে অদৃশ্য থাকে এবং মাউস নিয়ে গেলে শুধু দেখা যাবে। min-width 160px সেট করা হয়েছে।

ড্রপডাউন আইটেমকে একটি কার্ডের মত দেখানোর জন্য আমরা সিএসএস(৩) এর box-shadow প্রোপার্টি ব্যবহার করেছি।

:hover সিলেক্টরটি ব্যবহার করা হয়েছে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমকে প্রদর্শনের জন্য।


 

ড্রপডাউন মেনু

এই উদাহরণটি আগের উদাহরণের মতই, শুধু ড্রপডাউন কন্টেন্টে লিঙ্ক যোগ করা হয়েছেঃ

kt_satt_skill_example_id=1180


রাইট-এলাইন ড্রপডাউন কন্টেন্ট

আপনি যদি ড্রপডাউন কন্টেন্টকে ড্রপডাউন বাটনের ডান থেকে শুরু করতে চান তাহলে right: 0; সেট করে দিনঃ

kt_satt_skill_example_id=1186

common.content_added_by
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন
Promotion